<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/doublebox-bootstrap.css">

    <!-- Javascript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/doublebox-bootstrap.js"></script>
</head>
<body>
<h1>html直接写入选项</h1>
<div style="padding: 40px;border: 1px solid #F0F0F0;">
    <select id="doublebox" name="doublebox" multiple="multiple" size="5">
        <option value="1">张三</option>
        <option value="2">李四</option>
        <option value="3" selected="selected">王五</option>
        <option value="4">张超</option>
        <option value="5">张大</option>
        <option value="6" selected="selected">赵云</option>
        <option value="7">赵六</option>
        <option value="8" selected="selected">李雷</option>
        <option value="9">韩梅梅</option>
    </select>
    <br/>
    <button id="get1">获取选中值</button>
    <button id="get2">获取选中的值（自定义排序）</button>
</div>
<script>
    $(function () {
        var $dSelect = $('#doublebox');
        var $doublebox = $dSelect.doublebox({
            nonSelectedListLabel: '可选择',
            selectedListLabel: '已选择',
            filterPlaceHolder: '搜索',
            moveSelectedLabel:'添加所选',
            moveAllLabel:'添加全部',
            removeSelectedLabel:'删除所选',
            removeAllLabel:'删除全部',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false,
            doubleMove: true
        });

        $("#get1").on('click', function () {
            console.log($dSelect.val());
        });

        $("#get2").on('click', function () {
            var selectedArr = $doublebox.getSelectedOptions().split(','); //注意：同一页面如果有多个双选框，此方法会取到所有选中值
            console.log(selectedArr);
        });

    });
</script>
</body>
</html>